{include file="public/header"/}
<style>
    .recharge1 {
        background: #347ae2
    }

    .recharge1 .balanceTotal {
        padding: 56px 0
    }

    .recharge1 .balanceTotal .current-balance {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
        padding: 0 31px
    }

    .recharge1 .balanceTotal .current-balance .money {
        font-size: 28px;
        font-family: Rubik-Medium;
        font-weight: 700;
        color: #fff
    }

    .recharge1 .balanceTotal .current-balance div {
        font-size: 15px;
        font-family: Rubik-Medium;
        font-weight: 700;
        color: #fff
    }

    .recharge1 .input {
        background: #fff;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        text-align: center;
        font-size: 28px;
        font-family: Rubik-Bold, Rubik;
        font-weight: 700;
        color: #39324b;
        padding: 30px 50px 8px 50px
    }

    .recharge1 .input .inputClass {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        padding: 0 60px
    }

    .recharge1 .input .inputClass uni-text {
        font-size: 28px;
        display: inline-block
    }

    .recharge1 .input .inputClass uni-input {
        height: 100%
    }

    .recharge1 .input .inputClass .uni-input-input {
        font-size: 28px;
        font-family: Rubik-Bold, Rubik;
        font-weight: 700;
        color: #39324b;
        display: inline-block;
        height: 100%;
        text-align: left
    }

    .recharge1 .tip {
        background: #fff;
        font-size: 12px;
        font-family: Rubik-Bold, Rubik;
        font-weight: 400;
        color: #000;
        text-align: center;
        padding: 12px 25px
    }

    .recharge1 .main {
        border-top: 2px solid #efefef;
        background: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 25px
    }

    .recharge1 .main .title {
        font-size: 15px;
        font-family: Rubik-Bold, Rubik;
        font-weight: 700;
        color: #25396f;
        margin: 10px 0 20px
    }

    .recharge1 .main .money {
        overflow: hidden;
        padding-bottom: 15px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between
    }

    .recharge1 .main .money .block {
        width: 30%;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 18px;
        font-family: Rubik-Bold, Rubik;
        font-weight: 400;
        color: #6b6b6b;
        background: #efefef;
        border-radius: 8px;
        border: 1px solid #ddd;
        float: left;
        margin-top: 20px;
        font-size: 16px
    }

    .recharge1 .main .money > .block:nth-child(1) {
        margin-top: 0px
    }

    .recharge1 .main .money > .block:nth-child(2) {
        margin-top: 0px
    }

    .recharge1 .main .money > .block:nth-child(3) {
        margin-top: 0px
    }

    .recharge1 .main .money .active {
        background: #1e7eee;
        color: #fff
    }

    .recharge1 .main .payment div {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        height: 48px
    }

    .recharge1 .main .payment div uni-image {
        width: 20px;
        height: 20px
    }

    .recharge1 .main .payment div .payment-content {
        width: 90%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center
    }

    .recharge1 .main .payment div .payment-content uni-text {
        opacity: .8;
        font-size: 14px
    }

    .recharge1 .main .topup {
        height: 48px;
        background: #1e7eee;
        border-radius: 4px;
        line-height: 48px;
        font-size: 18px;
        font-family: Rubik-Bold, Rubik;
        font-weight: 700;
        color: #fff;
        text-align: center
    }

    .recharge1 .main .disable {
        background: #ddd;
        color: #fff
    }

    .recharge1 .main .notice {
        font-size: 14px;
        font-family: Rubik-Bold, Rubik;
        font-weight: 400;
        color: #636f85;
        line-height: 20px;
        padding: 20px 0 150px
    }
</style>

<body>
<uni-app class="uni-app--maxwidth">
    <uni-page data-page="pages/recharge/index">
        <!---->
        <!---->
        <uni-page-wrapper>
            <uni-page-body>
                <div class="recharge1">
                    <div class="top-page"
                         style="height: 44px; background: linear-gradient(to right, rgb(52, 122, 226), rgb(52, 122, 226)); color: rgb(255, 255, 255);">
                        <div class="apex"
                             style="height: 44px; line-height: 44px; background: linear-gradient(to right, rgb(52, 122, 226), rgb(52, 122, 226)); color: rgb(255, 255, 255); position: fixed;">
                            <a href="javascript:window.history.go(-1)" class="left">
                                <uni-text class="iconfont icon-fanhui1"
                                          style="font-size: 16px; color: rgb(255, 255, 255);"><span></span></uni-text>
                            </a>
                            <div class="center" style="font-size: 17px;">Recarrega</div>
                            <div class="right"></div>
                        </div>
                        <div class="placeholder" style="height: 44px; line-height: 44px;"></div>
                    </div>
                    <div class="balanceTotal">
                        <div class="current-balance">
                            <div>Equilíbrio</div>
                            <div class="money">${$user_info.balance}</div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <!---->
                    <div class="input">
                        <div class="inputClass">
                            <uni-text><span>$</span></uni-text>
                            <uni-input>
                                <div class="uni-input-wrapper">
                                    <div class="uni-input-placeholder input-placeholder" style="display: none;">
                                    </div>
                                    <input id="money" name="money" maxlength="140" step="" enterkeyhint="done" autocomplete="off" type="" class="uni-input-input" value="">
                                    <!---->
                                </div>
                            </uni-input>
                        </div>
                    </div>
                    <div class="tip">
                        <uni-text><span>* Quantidade mínima de recarga 200</span></uni-text>
                    </div>
                    <div class="main">
                        <div class="title">Dinheiro de seleção rápida</div>
                        <div class="money">
                            <div class="block">50</div>
                            <div class="block">100</div>
                            <div class="block">200</div>
                            <div class="block">500</div>
                            <div class="block">1000</div>
                            <div class="block">3000</div>
                            <div class="block">5000</div>
                            <div class="block">10000</div>
                            <div class="block">30000</div>
                        </div>

                        
                        {volist name="recharge_api" id="vo"}
                        {if $vo.name == 'Oceanpay' && $vo.status == 1}
                        <div class="payment">
                            <div>
                                <uni-image>
                                    <div style="background-image: url(/static/index/c9cf6682-28e5-4ef2-9084-d258a41ff710.png); background-position: 0% 0%; background-size: 100% 100%; background-repeat: no-repeat;height: 20px;">
                                    </div>
                                    <!---->
                                </uni-image>
                                <div class="payment-content">
                                    <uni-text><span>trc20</span></uni-text>
                                    <uni-image>
                                        <input name="type" class="ra" type="radio" value="trc20" style="zoom: 1.5" checked/>
                                    </uni-image>
                                </div>
                            </div>
                        </div>
                        {/if}

                        {if $vo.name == 'Global_pay' && $vo.status == 1}
                        <div class="payment">
                            <div>
                                <uni-image>
                                    <div style="background-image: url(&quot;/static/index/c9cf6682-28e5-4ef2-9084-d258a41ff710.png&quot;); background-position: 0% 0%; background-size: 100% 100%; background-repeat: no-repeat;height: 20px;">
                                    </div>
                                    <!---->
                                </uni-image>
                                <div class="payment-content">
                                    <uni-text><span>erc20</span></uni-text>
                                    <uni-image>
                                        <input name="type" class="ra" type="radio" value="erc20" style="zoom: 1.5"/>
                                    </uni-image>
                                </div>
                            </div>
                        </div>
                        {/if}

                        {/volist}

                        <div id="tijiao" class="topup disable">confirme</div>
                        <div class="notice"> Dica: a conta bancária da plataforma muda a qualquer momento, a cada depósito
                             vá para a página de recarga para obter o número da conta mais recente, não há responsabilidade
                             para nós se
                             você deposita em uma conta expirada！
                        </div>
                    </div>
                    {include file="public/footer"/}
                </div>
            </uni-page-body>
        </uni-page-wrapper>
    </uni-page>
</uni-app>
</body>
</html>
<script>
    
    $('.block').click(function(){
       $("#tijiao").addClass("Confirm");
       $("#tijiao").removeClass("disable");
    });
    
    $('#tijiao').click(function(){
        var a = $('#money').val();
        if(a!=''){
             var type = $("input[name='type']:checked").val();
            //  var lj = '/ch/recharge/'.type; alert(lj);
             window.location.href = "/bx/recharge/"+type+'?money='+a;
        }
        
    });

</script>

<script>
    ;(function () {
        let $list = $(".money .block");
        let $inputBar = $(".uni-input-input");
        $list.on("click", function () {
            $list.eq($(this).index()).addClass("active").siblings().removeClass("active");
            $inputBar.val($(this).text());
            $("#confirm").removeClass("disable");
            $("#confirm").addClass("Confirm");
        })

    }())

    $('#money').blur(function () {
        var money = $('input[name="money"]').val();
        if (money > 0){
            $("#tijiao").addClass("Confirm");
            $("#tijiao").removeClass("disable");
        }
    })

</script>
